<template>
    <ComModal  v-model:modalVisible="modalVisible" width="50%" :title="title === 'dept' ? '选择部门' : '选择岗位'" :height="'500px'" class="addressbook-post-dialog" @handleSubmit="handleSubmit" @handle-cancel="modalVisible=false" :disabled="!deptChecked.length">
		<div :class="['dept-post', { 'dept-post-overflow': title === 'post' }]">
			<template v-if="title === 'post'">
				<ComSearch @handleSearch="handleSearch" :isBtn="false"/>
				<div class="f-column f1 overflow_y">
					<template v-if="postListNew.length > 0">
						<div :class="['item', { 'item-active': item.checked }]" v-for="item in postListNew" :key="item.id" @click="handleCheck(item)">
							{{ item.name }}
						</div>
					</template>
					<a-empty v-else></a-empty>
				</div>
			</template>
			<template v-else>
				<ComTree  @send-checked-list="SendCheckedList" :treeCheckedList="deptCheckedIds" :multiple="multiple" v-bind="$attrs" ref="treeRef"/>
			</template>
		</div>
    </ComModal>
</template>
<script lang="ts" setup>
const props = defineProps({
    title: { type: String, default: () => { return '' } },
    postList: { type: Array, default: () => { return [] } }, // 岗位
	checkedList: { type: Array, default: () => { return [] } }, // 已勾选
    multiple: { type: Boolean, default: () => { return true } }, // 是否多选
})
const emit = defineEmits(['sendList']);
const modalVisible=ref(false);
const treeRef = ref(null);
const myDialogRef = ref(null)
const postListNew = ref([]) // 岗位
const postChecked = ref([]) // 已勾选岗位
const deptChecked = ref([]) // 已勾选部门
const deptCheckedIds = ref([]) // 已勾选部门id

watch(() => props.checkedList, e => {
	deptCheckedIds.value = e || [];
	deptChecked.value = e || [];
})

watch( () => props.postList, (e) => {
    postListNew.value = e;
},{ immediate: true })

watch(() => modalVisible.value, e => {
	if(!e){
        postListNew.value.forEach(item => {
            item.checked = false;
        })
		nextTick(() => {
			treeRef.value.filterText = '';
			treeRef.value.searchRef.searchKey = '';
			handleSearch('');
		})
    }
}, { immediate: true })

// 勾选
const handleCheck = (item) => {
    postListNew.value.forEach((k) => {
        if (k.id === item.id) {
            k.checked = !k.checked;
        }
    })
    const index = postChecked.value.findIndex((k) => k.id === item.id);
    if (index === -1) {
        postChecked.value.push(item);
    } else {
        postChecked.value.splice(index, 1);
    }
}

// 获取树勾选
const SendCheckedList = (e) => {
	// console.log('勾选====', e);
  deptChecked.value = e;
  deptCheckedIds.value = e.map((item) => {
    return item.id;
  })
}

// 搜索
const handleSearch = (e) => {
    postListNew.value = props.postList.filter(item => item.name.toLowerCase().includes(e.toLowerCase()));
}

// 提交
const handleSubmit = () => {
    // console.log('提交=====', props.title, props.title === 'dept' ? deptChecked.value : postChecked.value)
    emit('sendList', props.title === 'dept' ? deptChecked.value : postChecked.value)
	deptChecked.value = [];
	deptCheckedIds.value = [];
}

defineExpose({
	treeRef,
	myDialogRef,
	deptCheckedIds,
	postListNew,
	postChecked,
	modalVisible
})
</script>
<style lang="scss" scoped>
.dept-post {
    padding: 20px 20px 10px 20px;
    display: contents !important;
	&-overflow{
		overflow-y: initial !important;
	}
	.search-box{
		padding-top: 0;
	}
    .item {
        position: relative;
        cursor: pointer;
        padding: 6px 12px;
        &:not(:last-child){
            margin-bottom: 8px;
        }
        .checked {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translate(0, -50%);
        }
        &-active {
            color: var(--common-color);
            background: rgba(16, 85, 188, 0.05) !important;
        }
    }
}
</style>
<style lang="scss">
	.addressbook-post-dialog{
		.maxHeight{
			overflow: hidden !important;
		}
		.arco-modal-body{
			padding: 15px 20px;
		}
		.arco-tree-node-switcher{
			display: none;
		}
	}
</style>
